import React, { Component } from 'react'
import {connect} from "react-redux"
import * as action from "../action"
import {bindActionCreators} from "redux"
 class Detail extends Component {
  state = {
      item:{}
  }
  componentDidMount(){
      this.setState({
          item:this.props.history.location.state.item
      })
  } 
  addShop (item) {
    //   console.log(item);
    //   console.log(this.props)
      this.props.addshop(item)
  }
  render() {
    console.log(this.props.history);
    return (
      <div>
          {
              this.state.item ? <div >
                  <img src={ this.state.item.img} alt="" />
                  <h4>{ this.state.item.title}</h4>
                  <span>{this.state.item.price}</span>
                  <button onClick={this.addShop.bind(this,this.state.item)}>加入购物车</button>
              </div> :""
          }
      </div>
    )
  }
}
const mapStateToProps = (state) => {
    return {
        ...state.shopReducer
    }
}

const mapDispatchToProps =  (dispatch)=>bindActionCreators(action,dispatch)
export default connect(mapStateToProps,mapDispatchToProps)(Detail)